<template>
  <el-dialog
    title="设置用户"
    :visible.sync="dialogVisible"
    destroy-on-close
    width="1024px">
    <div>
      <el-button @click="insertUser" size="mini" style="margin-bottom: 5px">添加</el-button>
      <el-button @click="initButton" size="mini" style="margin-bottom: 5px">初始化按钮</el-button>
      <vxe-table
        border
        resizable
        show-overflow
        keep-source
        ref="xTable"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :data="tableData">
        <vxe-table-column width="200" field="name" title="名称" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column width="200" field="func" title="方法" :edit-render="{name: '$select', options: funOptions}"></vxe-table-column>
        <vxe-table-column title="排序">
          <template v-slot="{ row ,rowIndex  }">
            <vxe-button v-if="rowIndex !==0" icon="vxe-icon--arrow-top" @click="move(rowIndex-1,rowIndex)"></vxe-button>
            <vxe-button v-if="rowIndex !==tableData.length-1"  icon="vxe-icon--arrow-bottom" @click="move(rowIndex+1,rowIndex)"></vxe-button>
          </template>
        </vxe-table-column>
        <vxe-table-column title="操作" width="70" show-overflow>
          <template v-slot="{ row }">
            <vxe-button type="text" icon="el-icon-delete" @click="removeEvent(row)"></vxe-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
    import Const from './Const'
    import lodash from 'lodash'
    export default {
        components:{

        },
        props: {
            value: {
                type: Object,
                default() {
                    return ''
                }
            }
        },
        data() {
            return {
                tableData:[],
                funOptions:Const.funOptions,
                dialogVisible: false,
            }
        },
        computed: {

        },
        watch: {
            extended(n){
                this.init()
            }
        },
        methods: {
            init(){


            },
            initButton(){
                //如果列表有数据需要确认下
                if(this.tableData.length){
                    this.$confirm('确定重新初始化按钮?').then(()=>{
                        this.tableData = lodash.cloneDeep(Const.ButtonList)
                    })
                }else {
                    this.tableData = lodash.cloneDeep(Const.ButtonList)
                }
            },
            removeEvent(row) {
                const index = this.tableData.findIndex(x=>x===row)
                this.tableData.splice(index,1)
            },
            confirm() {
                this.$emit('input', {
                    ...this.value,
                    buttonList:this.tableData
                })
                this.dialogVisible = false
            },
            move (newIndex ,oldIndex)  {
                const currRow = this.tableData.splice(oldIndex, 1)[0]
                this.tableData.splice(newIndex, 0, currRow)
            },
            insertUser(){
                const row = {
                    func:'',
                    name:''
                }
                this.tableData.push(row)
                this.$refs.xTable.setActiveRow(row)
            },
            open() {
                let arr = this.value.buttonList
                if(!arr){
                    arr = []
                }
                this.tableData =  lodash.cloneDeep(arr)
                this.dialogVisible = true
            }
        },
        mounted() {

        },
    }
</script>
<style>
    .vxe-select--panel.is--transfer{
        z-index: 40000 !important;
    }
</style>
